
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>JavaScript实现的带缩略图且双向移动的横向焦点图轮换</title>
<style type="text/css">
/* Reset style */
* { margin:0; padding:0; word-break:break-all; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
ul, li { list-style:none; }
fieldset, img { border:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
/* Focus_change style */
#focus_change {
	position:relative;
	width:570px;
	height:300px;
	overflow:hidden;
	margin-top: 5px;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 5px;
}
#focus_change_list {
	position:absolute;
	width:2300px;
	height:300px;
}
#focus_change_list li { float:left; }
#focus_change_list li img {
	width:570px;
	height:300px;
}

#focus_change_btn {
	position:absolute;
	width:570px;
	height:65px;
	top:225px;
	left:0;
}
#focus_change_btn ul {
	padding-left:10px;
	width:570px;
}
#focus_change_btn li {
	display:inline;
	float:left;
	padding-top:12px;
	margin-top: 0;
	margin-right: 15px;
	margin-bottom: 0;
	margin-left: 15px;
}
#focus_change_btn li img {
	width: 76px;
	height: 50px;
	border: 2px solid #888;
}
#focus_change_btn .current {
	
}
#focus_change_btn .current img {
	border-color: #EEE;
}
</style>


</head>

<body>
<div id="focus_change">
  <div id="focus_change_list" style="top:0; left:0;">
    <ul>
      <li><a href=""><img src="images/001.jpg" alt="" /></a></li>
      <li><a href=""><img src="images/002.jpg" alt="" /></a></li>
      <li><a href=""><img src="images/003.jpg" alt="" /></a></li>
      <li><a href=""><img src="images/004.jpg" alt="" /></a></li>
    </ul>
  </div>
  <div id="focus_change_btn">
    <ul>
      <li class="current">
          <a href="#"><img src="images/001.jpg" alt="" /></a>
      </li>
      <li><a href=""><img src="images/002.jpg" alt="" /></a></li>
      <li><a href=""><img src="images/003.jpg" alt="" /></a></li>
      <li><a href=""><img src="images/004.jpg" alt="" /></a></li>
    </ul>
  </div>
</div>
<script type="text/javascript">
  function $(id) { return document.getElementById(id); }
  function moveElement(elementID,final_x,final_y,interval) {
	if (!document.getElementById) return false;
	if (!document.getElementById(elementID)) return false;
	var elem = document.getElementById(elementID);
	if (elem.movement) {
	  clearTimeout(elem.movement);
	}
	if (!elem.style.left) {
	  elem.style.left = "0px";
	}
	if (!elem.style.top) {
	  elem.style.top = "0px";
	}
	var xpos = parseInt(elem.style.left);
	var ypos = parseInt(elem.style.top);
	if (xpos == final_x && ypos == final_y) {
	  return true;
	}
	if (xpos < final_x) {
	  var dist = Math.ceil((final_x - xpos)/10);
	  xpos = xpos + dist;
	}
	if (xpos > final_x) {
	  var dist = Math.ceil((xpos - final_x)/10);
	  xpos = xpos - dist;
	}
	if (ypos < final_y) {
	  var dist = Math.ceil((final_y - ypos)/10);
	  ypos = ypos + dist;
	}
	if (ypos > final_y) {
	  var dist = Math.ceil((ypos - final_y)/10);
	  ypos = ypos - dist;
	}
	elem.style.left = xpos + "px";
	elem.style.top = ypos + "px";
	var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
	elem.movement = setTimeout(repeat,interval);
  }
  
  function classNormal(){
	var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
	for(var i=0; i<focusBtnList.length; i++) {
	  focusBtnList[i].className='';
	}
  }
  
  function focusChange() {
	var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
	focusBtnList[0].onmouseover = function() {
	  moveElement('focus_change_list',0,0,5);
	  classNormal()
	  focusBtnList[0].className='current'
     }
	focusBtnList[1].onmouseover = function() {
	  moveElement('focus_change_list',-570,0,5);
	  classNormal()
	  focusBtnList[1].className='current'
	 }
	focusBtnList[2].onmouseover = function() {
	  moveElement('focus_change_list',-1140,0,5);
	  classNormal()
	  focusBtnList[2].className='current'
	}
	  focusBtnList[3].onmouseover = function() {
	  moveElement('focus_change_list',-1710,0,5);
	  classNormal()
	  focusBtnList[3].className='current'
	}
  }

  window.onload=function(){
	focusChange();
  }
</script> 
</body>
</html>


      
     